<template>
  <view class="container">
    <!-- 搜索框 -->
    <view class="fixed-box">
      <view class="search-bar">
        <image @tap="goBack" class="goback" src="../../static/images/icon/goback.png"></image>
        <view class="search-box">
          <input placeholder="输入关键字搜索" class="sear-input" :value="prodName" confirm-type="search"
            @input="getSearchContent" @confirm="toSearchConfirm">
          <image src="@/static/images/icon/search.png" class="search-img" />
        </view>
        <view class="search-list-img" @tap="changeShowType">
          <image v-if="showType==1" src="@/static/images/icon/search-col.png" />
          <image v-if="showType==2" src="@/static/images/icon/search-col2.png" />
        </view>
      </view>
      <view class="tabs">
        <text :class="'tab-item complete ' + (sts==0?'on':'')" data-sts="0" @tap="onStsTap">
          综合
        </text>
        <!-- 价格升序 -->
        <view v-if="sts==1" data-sts="2" @tap="onStsTap" :class="'tab-item ' + (sts==1?'on':'')">
          <text> 价格 </text>
          <image src="@/static/images/icon/sort-up.png" class="sort"></image>
        </view>
        <!-- 价格降序 -->
        <view v-else-if="sts==2" data-sts="0" @tap="onStsTap" :class="'tab-item ' + (sts==2?'on':'')">
          <text> 价格 </text>
          <image src="@/static/images/icon/sort-down.png" class="sort"></image>
        </view>
        <!-- 价格不排序 -->
        <view v-else class="tab-item" @tap="onStsTap" data-sts="1">
          <text>
            价格
          </text>
          <image src="@/static/images/icon/sort.png" class="sort"></image>
        </view>
        <text :class="'tab-item ' + (sts==3?'on':'')" data-sts="3" @tap="onStsTap">
          最近活跃
        </text>
      </view>
    </view>

    <!-- 商品列表 -->
    <view class="prod-list">
      <!-- 横向列表 -->
      <view v-if="showType==1" class="prod-show">
        <view class="hotsale-item-cont">
          <block v-for="(item, index) in searchProdList" :key="index">
            <production :item="item" sts="6" />
          </block>
        </view>
      </view>

      <!-- 纵向列表 -->
      <view v-if="showType==2" class="cont-item">
        <block v-for="(item, index) in searchProdList" :key="index">
          <view class="show-item" :data-prodid="item.id" @tap="toProdPage">
            <view class="more-prod-pic">
              <image :src="item.picture" class="more-pic" />
            </view>
            <view class="prod-text-right">
              <view class="prod-text more">
                {{ item.title }}
              </view>
              <view class="cate-prod-info">
                {{ item.degree }}
              </view>
              <view class="prod-price more">
                <text class="symbol">
                  ￥
                </text>
                <text class="big-num">
                  {{ wxs.parsePrice(item.price)[0] }}
                </text>
                <text class="small-num">
                  .{{ wxs.parsePrice(item.price)[1] }}
                </text>
              </view>
            </view>
          </view>
        </block>
      </view>

      <!-- 空占位 -->
      <view v-if="!searchProdList.length" :class="['empty',showType==1? 'empty-top':'']">
        暂无结果
      </view>
    </view>
  </view>
</template>

<script setup>
  const wxs = number()
  const prodName = ref('')
  /**
   * 生命周期函数--监听页面加载
   */
  onLoad((options) => {
    prodName.value = options.prodName
  })

  /**
   * 生命周期函数--监听页面显示
   */
  onShow(() => {
    toLoadData()
  })

  const showType = ref(2)
  const changeShowType = () => {
    if (showType.value == 1) {
      showType.value = 2
    } else {
      showType.value = 1
    }
  }

  /**
   * 输入商品获取数据
   * @param e
   */
  const getSearchContent = (e) => {
    prodName.value = e.detail.value
  }

  const sts = ref(0)
  const searchProdList = ref([])
  /**
   *  请求热门搜索商品接口
   */
  const toLoadData = () => {
    http.request({
        url: '/goods/search',
        method: 'GET',
        data: {
          current: 1,
          prodName: prodName.value,
          size: 10,
          sort: sts.value
        }
      })
      .then(({
        data
      }) => {
        searchProdList.value = data.records
      })
  }

  /**
   * 当前搜索页二次搜索商品
   */
  const toSearchConfirm = (e) => {
    if (e.detail.value) {
      let recentSearch = uni.getStorageSync('recentSearch') || []
      recentSearch = recentSearch.filter(item => item !== prodName.value)
      recentSearch.unshift(prodName.value)
      if (recentSearch.length > 10) {
        recentSearch.pop()
      }
      uni.setStorageSync('recentSearch', recentSearch)
    }
    uni.redirectTo({
      url: '/pages/search-prod-show/search-prod-show?prodName=' + e.detail.value
    })
  }

  /**
   * 状态点击事件
   */
  const onStsTap = (e) => {
    sts.value = e.currentTarget.dataset.sts
    toLoadData()
  }

  const toProdPage = (e) => {
    uni.navigateTo({
      url: '/pages/prod/prod?goodsId=' + e.currentTarget.dataset.prodid
    })
  }

  /**
   * 返回上一页
   */
  const goBack = () => {
    uni.navigateBack({
      delta: 1
    })
  }
</script>

<style scoped lang="scss">
  @use './search-prod-show.scss';
</style>
